<template>
  <view v-if="visible" class="modal-container">
    <!-- 遮罩层 -->
    <view 
      class="modal-mask"
      :class="{ 'modal-mask-animation': animation }"
      @click="maskClosable ? handleClose() : null"
    ></view>
    
    <!-- 模态框 -->
    <view 
      class="modal-content"
      :class="[
        `position-${position}`,
        { 'modal-animation': animation },
        customClass
      ]"
      :style="modalStyle"
    >
      <!-- 标题区域 -->
      <view v-if="$slots.header || title" class="modal-header">
        <slot name="header">
          <text class="modal-title">{{ title }}</text>
          <view v-if="showClose" class="modal-close" @click="handleClose">✕</view>
        </slot>
      </view>
      
      <!-- 内容区域 -->
      <view class="modal-body" :style="bodyStyle">
        <slot></slot>
      </view>
      
      <!-- 底部区域 -->
      <view v-if="$slots.footer || (showCancel || showConfirm)" class="modal-footer">
        <slot name="footer">
          <view class="modal-buttons">
            <view 
              v-if="showCancel" 
              class="modal-button cancel-button" 
              @click="handleCancel"
            >{{ cancelText }}</view>
            <view 
              v-if="showConfirm" 
              class="modal-button confirm-button" 
              @click="handleConfirm"
            >{{ confirmText }}</view>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseModal',
  props: {
    // 是否显示模态框
    visible: {
      type: Boolean,
      default: false
    },
    // 模态框标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否可关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 模态框宽度
    width: {
      type: [String, Number],
      default: '80%'
    },
    // 模态框位置
    position: {
      type: String,
      default: 'center',
      validator: value => ['center', 'top', 'bottom'].includes(value)
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示确认按钮
    showConfirm: {
      type: Boolean,
      default: false
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    },
    // 自定义类名
    customClass: {
      type: String,
      default: ''
    },
    // 是否启用动画
    animation: {
      type: Boolean,
      default: true
    },
    // 内容区域高度
    bodyHeight: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    modalStyle() {
      const style = {};
      
      if (this.width) {
        style.width = isNaN(Number(this.width)) 
          ? this.width 
          : `${this.width}rpx`;
      }
      
      return style;
    },
    bodyStyle() {
      if (this.bodyHeight) {
        const height = isNaN(Number(this.bodyHeight)) 
          ? this.bodyHeight 
          : `${this.bodyHeight}rpx`;
        return { height, overflow: 'auto' };
      }
      return {};
    }
  },
  methods: {
    handleClose() {
      this.$emit('close');
    },
    handleCancel() {
      this.$emit('cancel');
      this.handleClose();
    },
    handleConfirm() {
      this.$emit('confirm');
      this.handleClose();
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $z-index-modal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  @include full-cover;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.modal-mask-animation {
  animation: fadeIn $transition-base ease;
}

.modal-content {
  background: $bg-white;
  border-radius: $border-radius-lg;
  overflow: hidden;
  box-shadow: $shadow-lg;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  
  &.position-center {
    margin: auto;
    max-width: 90%;
  }
  
  &.position-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 $border-radius-lg $border-radius-lg;
  }
  
  &.position-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: $border-radius-lg $border-radius-lg 0 0;
  }
}

.modal-animation {
  &.position-center {
    animation: zoomIn $transition-base $transition-ease;
  }
  
  &.position-top {
    animation: slideInDown $transition-base $transition-ease;
  }
  
  &.position-bottom {
    animation: slideInUp $transition-base $transition-ease;
  }
}

.modal-header {
  padding: $spacing-lg;
  border-bottom: 1px solid $border-color-light;
  position: relative;
  @include flex-between;
}

.modal-title {
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.modal-close {
  font-size: $font-size-md;
  color: $text-tertiary;
  padding: $spacing-xs;
  cursor: pointer;
}

.modal-body {
  padding: $spacing-lg;
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  padding: $spacing-lg;
  border-top: 1px solid $border-color-light;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: $spacing-md;
}

.modal-button {
  padding: $spacing-sm $spacing-lg;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  text-align: center;
  cursor: pointer;
  
  &.cancel-button {
    background-color: $bg-gray;
    color: $text-primary;
  }
  
  &.confirm-button {
    background: $primary-gradient;
    color: white;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
